<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>UserManger</title>
    <script src="http://localhost:10000/js/jquery-1.11.3.min.js"></script>
    <style type=text/css>
        .blueFont {color: #6699CC}
        .redFont {color: #FF0000}
        /***** Other Elements in Page Content *****/
        .pwd-strength {
            border: solid 1px #CCCCCC;
        }
        .pwd-strength-box{
            width: 80px;
            height: 20px;
        }
        .pwd-strength-box-low,
        .pwd-strength-box-med,
        .pwd-strength-box-hi
        {
            width: 80px;
            height: 20px;
            color: #464646;
            width: 33%;
        }
        .pwd-strength-box-low
        {
            width: 80px;
            height: 20px;
            color: #9C9C9C;
            background-color: red;
        }
        .pwd-strength-box-med
        {
            width: 80px;
            height: 20px;
            color:  #9C9C9C;
            background-color: yellow;
        }
        .pwd-strength-box-hi
        {
            width: 80px;
            height: 20px;
            color: #9C9C9C;
            background-color: green;
        }</style>
</head>
<body>
<!---->

<table >
    <tr>
        <td>系统管理 >> 用户管理</td>
    </tr>
    <tr>
        <td>
            查询
        </td>
    </tr>
</table>
<form action="User.do">
    <table border="1" width=90% solid #505ca0>
        <tr><!--4行，11列 -->
            <td>
                用户id
            </td>
            <td colspan="10">
                <input type="text" id="userID" name="userID" th:value="${session.userID}" />
            </td>
        </tr>
        <tr>
            <td>
                用户名称
            </td>
            <td colspan="10">
                <input type="text" id="userName" name="userName" th:value="${session.userName}"/>
            </td>
        </tr>
        <tr><td> <input type="hidden" th:value="${session.pageInfo.getPageNum()}" id="pageNum"></td>
            <td colspan="11"><input type="submit" value="查询"></td></tr>
    </table>
    每页显示条数<select name="pageSize" id="pageSize" onchange="lastpage1(this.value)">
    <option th:selected="${session.pageInfo.pageSize==15}">15</option>
    <option th:selected="${session.pageInfo.pageSize==10}">10</option>
    <option th:selected="${session.pageInfo.pageSize==5}">5</option>
</select>
</form>

<table>
    <tr><td height="50px"></td></tr>
</table>

<label th:if="${session.pageInfo.size==0}" style="color: #ff4400">
    没有查到任何数据!请核对查询信息
</label>

    <table border="1" width=90% th:if="${session.pageInfo.size!=0}">
        <tr>
            <td></td><td>用户ID</td><td>用户名</td><td>登录账号</td><td>用户类型</td><td>性别</td><td>编辑时间</td>
        </tr>
        <tr th:each="everyCus:${session.pageInfo.getList()}" id="tr1">
            <td><input type="radio" name="a" th:value="${everyCus.userID}" onclick="select1(this.value)"></td>
            <td th:text="${everyCus.userID}" ></td>
            <td th:text="${everyCus.userName}" ></td>
            <td th:text="${everyCus.userAccount}" ></td>
            <td th:text="${everyCus.permName}"></td>
            <td th:text="${everyCus.userSex}"></td>
            <td th:text="${everyCus.userEditTime}"></td>
        </tr>
        <tr>
<!--            <label th:if="${session.pageInfo.getPageNum()==1 && session.pageInfo.getPages()>1}" style="color: #ff4400">-->
<!--                第一页了-->
<!--            </label>-->
            <button th:value="${session.pageInfo.getPageNum()>1?session.pageInfo.getPageNum()-1:session.pageInfo.getPageNum()}" onclick="lastpage(this.value)">上一页</button>
<!--            第<label th:text="${session.pageInfo.getPageNum()}"></label>页-->
            <button th:value="${session.pageInfo.getPageNum()<session.pageInfo.getPages()?session.pageInfo.getPageNum()+1:session.pageInfo.getPageNum()}" onclick="lastpage(this.value)">下一页</button>
<!--            <label th:if="${session.pageInfo.getPageNum()==session.pageInfo.getLastPage()}" style="color: #ff4400">-->
<!--                最后一页了-->
<!--            </label>-->
        </tr>
    </table>



    <table>
        <tr><td height="50px">用户信息</td></tr>
    </table>

    <form action="User4.do">
        <table border="1" width=90% ><!-- 11行11列-->
            <tr>
                <td>
                    用户名称
                </td>
                <td colspan="10">
                    <input  type="text" id="userName1" name="userName"/>
                    <input  type="hidden" id="userID1" name="userID"/>
                </td>
            </tr>

            <tr>
                <td>
                    用户登录账号
                </td>
                <td colspan="10">
                    <input type="text" id="userAccount" name="userAccount"/>
                </td>
            </tr>

            <tr>
                <td>
                    登录密码
                </td>
                <td colspan="10">
                    <input type="text" id="userPwd" name="userPwd"  onkeyup="checkPassword()"/>
                </td>
            </tr>

            <tr>
                <td>
                    安全性
                </td>
                <td id=pwdLow class=pwd-strength-box>低</td>
                <td  id=pwdMed class=pwd-strength-box>中</tD>
                <td  id=pwdHi class=pwd-strength-box>高</td>
                <td colspan="6" width="70%">
                    <span id="pwdSafe" ></span>
                </td>
            </tr>

            <tr>
                <td>
                    确认密码
                </td>
                <td colspan="10">

                    <input type="text"  id="userPwd1"onkeyup="validate()"/><span id="tishi" ></span>
                </td>
            </tr>

            <tr>
                <td>
                    用户类型
                </td>
                <td colspan="10">
                    <select id="userType" name="userType">
                        <option value ="管理员" id="type" >管理员</option>
                        <option value ="普通用户" id="type1">普通用户</option>
                    </select>
                </td>

<!--                <td>用户类型</td>-->
<!--                <td>-->
<!--                    <select name="userType" id="userType" >-->
<!--                        <option th:selected="${session.wms_t_user.userType eq '0'}" value="0">普通用户</option>-->
<!--                        <option th:selected="${session.wms_t_user.userType eq '1'}" value="1">管理员</option>-->
<!--                    </select>-->
<!--                </td>-->
            </tr>

            <tr>
                <td>
                    所在组
                </td>
                <td colspan="10">
                    <textarea disabled id="textarea"></textarea>
                    <label onclick="group()" id="button" >请选择</label>
                    <table id="table3"></table>
                </td>
            </tr>

            <tr>
                <td>
                    性别
                </td>
                <td colspan="10">
                    <input  type="text" id="userSex" readonly="readonly"/>
                    <input type="hidden" id="groupName1" name="groupName1">
                </td>
            </tr>

            <tr>
                <td>
                    备注
                </td>
                <td colspan="10">
                    <textarea rows="5" cols="40" id="userNote" name="userNote"></textarea>
                </td>
            </tr>

            <tr>
                <td>
                    编辑时间
                </td>
                <td colspan="10">
                    <input type="text" readonly="readonly" id="userEditTime" name="userEditTime"/>
                </td>
            </tr>

            <tr>
                <td>
                    状态
                </td>
                <td colspan="10">
                    <input id="state" type="radio"  name="state" value="1"/>删除
                    <input type="radio" name="state"checked="checked" value="0">活动
                </td>
            </tr>

            <tr>
                <td>

                </td>
                <td colspan="10">
                    <button type="submit">提交</button>
                    <button type="reset">重置</button>
                </td>
            </tr>
        </table>
    </form>
</body>

<script type="text/javascript">
    //上一页和下一页  86,96
    function lastpage(page) {
        var userName = $("#userName").val();
        var userID = $("#userID").val();
        var pageSize = $("#pageSize").val();
        window.location = "User.do?pageNum="+page+"&pageSize="+pageSize+"&userName="+userName+"&userID="+userID;
    }
    //每页查询
    function lastpage1(page) {
        var userName = $("#userName").val();
        var userID = $("#userID").val();
        var pageNum = $("#pageNum").val();
        window.location = "User.do?pageNum="+pageNum+"&pageSize="+page+"&userName="+userName+"&userID="+userID;
    }

    //选择修改的客户信息，将查询到的值返回到客户信息列表
    function select1(userID) {
        $.ajax({
            url:"User1.do",
            data:"userID="+userID,
            dataType:"json",
            success:function (data) {
                console.log(JSON.stringify(data)) ;
                for (var i = 0; i < data.length; i++){
                    $("#userName1").attr("value",data[i].userName);
                    $("#userAccount").attr("value",data[i]. userAccount);
                    $("#userPwd").attr("value",data[i].userPwd);
                    document.getElementById("userNote").value=data[i].userNote;
                    $("#userSex").attr("value",data[i].userSex);
                    $("#userEditTime").attr("value",data[i].userEditTime);
                    $("#userType").val(data[i].permName);
                    $("#userID1").attr("value",data[i].userID);
                }
            }
        })
    }

    //选择按钮
    function group() {
        $("#table3").html("");
        $.ajax({
            url:"User2.do",
            dataType:"json",
            success:function (data) {
                console.log(data[1].groupName)
                for (var i=0;i<data.length;i++)
                {
                    $("#table3").append("<tr><td  onclick=\"selectPermName('"+data[i].groupName+"')\" >"+data[i].groupName+"<input type='hidden' value='"+data[i].groupName+"'></td></tr>")
                }
            }
        })

    }

    //选择组
    function selectPermName(text){
        $("#textarea").html("")
        $("#textarea").html(text)
        var groupName=text;
        $.ajax({
            type:"json",
            url: "User3.do?groupName="+groupName,
            success:function (data) {
                console.log(data.permName)
                $("#userType").val(data.permName);
                $("#groupName1").val(groupName);
            }
        })
    }

    //确认密码
    function validate() {
        var pw1 = document.getElementById("userPwd").value;
        var pw2 = document.getElementById("userPwd1").value;
        if(pw1 == pw2) {
            document.getElementById("tishi").innerHTML="<font color='green'>两次密码相同</font>";
            document.getElementById("submit").disabled = false;
        }
        else {
            document.getElementById("tishi").innerHTML="<font color='red'>两次密码不相同</font>";
            document.getElementById("submit").disabled = true;
        }
    }

    //密码安全性
    function checkPassword(){
        var pwd = document.getElementById("userPwd").value;
        var objLow=document.getElementById("pwdLow");
        var objMed=document.getElementById("pwdMed");
        var objHi=document.getElementById("pwdHi");
        objLow.className="pwd-strength-box";
        objMed.className="pwd-strength-box";
        objHi.className="pwd-strength-box";
        if(pwd.length<6){
            objLow.className="pwd-strength-box-low";
        }else if(pwd.length>=6 && pwd.length<12){
            var p1= (pwd.search(/[0-9]/)!=-1) ? 1 : 0;
            var p2= (pwd.search(/[a-zA-Z0-9]/)!=-1) ? 1 : 0;
            var pa=p1+p2;
            if(pa==1){
                objLow.className="pwd-strength-box-low";
            }else if(pa==2){
                objMed.className="pwd-strength-box-med";
            }
        }else if(pwd.length>=12){
            var p1= (pwd.search(/[a-zA-Z]/)!=-1) ? 1 : 0;
            var p2= (pwd.search(/[0-9]/)!=-1) ? 1 : 0;
            var p3= (pwd.search(/[^A-Za-z0-9_,+]/)!=-1) ? 1 : 0;
            var pa=p1+p2+p3;
             if(pa==1  || pa==2){
                objMed.className="pwd-strength-box-med";
            }else if(pa==3){
                objHi.className="pwd-strength-box-hi";
            }
        }
    }


</script>

</html>
